---
title: gluestack-ui Toast Component | Installation, Usage, and API

description: Toast is a component that can display alerts, notifications, or messages on top of an overlay layer. It is commonly used to inform users of important information or actions.

pageTitle: Toast

pageDescription: Toast is a component that can display alerts, notifications, or messages on top of an overlay layer. It is commonly used to inform users of important information or actions.

showHeader: true
---

import { Meta } from '@storybook/addon-docs';

<Meta title="with-gluestack-style/Components/Feedback/Toast" />

import {
  Toast,
  ToastTitle,
  ToastDescription,
  useToast,
  Button,
  ButtonText,
  Text
} from '../../core-components/themed';
import { CheckIcon } from '@gluestack-ui/themed';
import { AlertTriangleIcon,MessageCircle } from 'lucide-react-native';
import {
  Icon,
  CloseIcon,
  VStack,
  Pressable,
  Center
} from '../../core-components/themed';
import { transformedCode } from '../../utils';
import {
  AppProvider,
  CodePreview,
  Table,
  TableContainer,
  InlineCode,
  CollapsibleCode,
  Tabs
} from '@gluestack/design-system';
import { View } from 'react-native';
import Wrapper from '../../core-components/themed/Wrapper';

## Installation

<Tabs value="cli" type="section">
  <Tabs.TabList>
      <Tabs.Tab value="cli">
        <Tabs.TabTitle>CLI</Tabs.TabTitle>
      </Tabs.Tab>
     <Tabs.Tab value="manual">
        <Tabs.TabTitle>Manual</Tabs.TabTitle>
     </Tabs.Tab>
  </Tabs.TabList>
  <Tabs.TabPanels>
    <Tabs.TabPanel value="cli">
<>

### Run the following command:
  ```bash
  npx gluestack-ui add toast
  ```
</>
    </Tabs.TabPanel>
    <Tabs.TabPanel value="manual"> 
<>

### Step 1: Install the following dependencies:
```bash
npm i @gluestack-ui/toast
```

### Step 2: Copy and paste the following code into your project.
<CollapsibleCode>

```jsx 
%%-- File: core-components/themed/toast/index.tsx --%% 
```
</CollapsibleCode>

### Step 3: Update the import paths to match your project setup.
</>
    </Tabs.TabPanel>
  </Tabs.TabPanels>
</Tabs>

## API Reference

To use this component in your project, include the following import statement in your file.

```jsx
import { useToast, Toast } from '@/components/ui/toast';
```

```jsx
export default () => (
  <Toast>
    <ToastTitle />
    <ToastDescription />
  </Toast>
);
```

### Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

#### Toast

It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component.

<>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Prop</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Type</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Default</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Description</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>duration</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>number or null</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>5000</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`The delay before the toast hides (in milliseconds). If set to null, toast will never dismiss.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>onCloseComplete</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`()=>{}`}</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Callback function to run side effects after the toast has closed.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>placement</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>
              'top'| 'top right' | 'top left' | 'bottom' | 'bottom left' |
              'bottom right'
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>bottom</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>Position of toast on the web page.</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>render?: (props: any)</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>ReactNode</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>Renders a toast component</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>avoidKeyboard</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>bool</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>false</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`If true and the keyboard is opened, the Toast will move up equivalent to the keyboard height.`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>containerStyle</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>ViewStyle</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>-</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>Container style object for the toast.</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</>

**Descendants Styling Props**
Props to style child components.

<>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Sx Prop</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Description</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>_icon</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Prop to style Icon Component`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>_title</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Prop to style AlertTitle Component`}</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>_description</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>{`Prop to style AlertDescription Component`}</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</>

#### ToastTitle

Contains all Text related layout style props and actions.
It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.

#### ToastDescription

Contains all Text related layout style props and actions.
It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component.

### Accessibility

We have outlined the various features that ensure the Toast component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.Adheres to the [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alert/).

#### Keyboard

- `Tab + Enter`: Triggers the toast's action.

#### Screen Reader

- VoiceOver: When the toast is focused, the screen reader will announce the toast's title.

### Props

Toast component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below.

#### Toast

<>
  <TableContainer>
    <Table>
      <Table.THead>
        <Table.TR>
          <Table.TH>
            <Table.TText>Name</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Value</Table.TText>
          </Table.TH>
          <Table.TH>
            <Table.TText>Default</Table.TText>
          </Table.TH>
        </Table.TR>
      </Table.THead>
      <Table.TBody>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>action</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>
              error | warning | success | info | attention
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>attention</Table.TText>
          </Table.TD>
        </Table.TR>
        <Table.TR>
          <Table.TD>
            <Table.TText>
              <InlineCode>variant</InlineCode>
            </Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>solid | outline | accent</Table.TText>
          </Table.TD>
          <Table.TD>
            <Table.TText>solid</Table.TText>
          </Table.TD>
        </Table.TR>
      </Table.TBody>
    </Table>
  </TableContainer>
</>

<!--

### Advanced

We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements.

### Customizing the Toast

We have a function called `createToast` which can be used to create a custom toast component. This function takes in a configuration object which contains the styled components that you want to use for the Input. You can refer [gluestack.io/style](/style/docs/getting-started/styled) on how to use styled components.

#### Usage

Default styling of all these components can be found in the `components/core/toast` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Toast) of the styled `Toast` components.

```jsx
// import the styles
import {
  Root,
  Title,
  Description,
} from 'components/core/toast/styled-components';

// import the createToast function
import { createToast, createToastHook } from '@gluestack-ui/toast';

// Understanding the API
const Toast = createToast({
  Root,
  Title,
  Description,
});

const useToast = createToastHook(Toast);

// Using the toast component
export default () => {
  const toast = useToast();
  return (
    <Button
      {...props}
      onPress={() => {
        toast.show({
          placement: placement,
          render: ({ id }) => {
              const toastId = "toast-" + id;
              return (
                <Toast nativeID={toastId}>
                <ToastTitle>Hello World Toast {id}</ToastTitle>
              </Toast>
            );
          },
        });
      }}
    >
      <ButtonText>Press Me</ButtonText>
    </Button>
  );
};
```
-->